<template>
  <span>Name:{{ author.name }}</span>
  <p>Has published books:</p>
  <span>
    {{ isPublishedBooks }}
  </span>
  可以修改的计算属性
  <div>{{ fullName }}</div>
  属性和方法的对比
  <button v-on:click="a++">A++</button>
  <button v-on:click="b++">B++</button>
  <p>computedA: {{ computedA }}</p>
  computed多次使用不会重新计算：
  <p>computedA: {{ computedA }}</p>
  <p>computedB: {{ computedB }}</p>
  <p>methodA: {{ methodA() }}</p>
  <p>methodB: {{ methodB() }}</p>
</template>

<script setup>
  import { reactive, computed, ref } from "vue";
  const author = reactive({
    name: 'John Doe',
    books: ['Vue 2 - Advanced Guide', 'Vue 3 - Basic Guide', 'Vue 4 - The Mystery']
  })

  /* computed返回一个计算属性的 ref */
  const isPublishedBooks = computed(() => {
    return author.books.length > 0 ? 'Yes' : 'No'
  })


  const firstName = ref('曾')
  const lastName = ref('庆森')

  const fullName = computed({
    //读取属性的时候会触发
    get() {
      return firstName.value + ' ' + lastName.value
    },
    //设置属性值的时候会自动触发
    set(newName) {
      [firstName.value, lastName.value] = newName.split(' ')
    }
  })

  // setTimeout(() => {
  //   fullName.value = 'Zeng qingsen'
  // }, 1000);

  const a = ref(1)
  const b = ref(1)
  // 创建两个计算属性，分别依赖 a 和 b
  const computedA = computed(() => {
    console.log('计算属性A重新计算了')
    return a.value + 1
  })
  const computedB = computed(() => {
    console.log('计算属性B重新计算了')
    return b.value + 1
  })

  function methodA() {
    console.log('methodA执行了')
    return a.value + 1
  }
  function methodB() {
    console.log('methodB执行了')
    return b.value + 1
  }



</script>

<style lang="scss" scoped></style>
